<%@ page contentType="text/html;charset=UTF-8" %>
<!doctype html>
<html>
<head>
<%--    <script>--%>
<%--        $(document).ready(function (){--%>
<%--            location.href="/film/preview"--%>
<%--        })--%>
<%--    </script>--%>
    <meta charset="utf-8">
    <title>热映电影</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resource/css/style.css">
    <!--轮播图 结束 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resource/js/script.js"></script>
</head>
<body>
<!--轮播图 开始 -->
<div class="main_banner">
    <div class="main_banner_wrap">
        <canvas id="myCanvas" width="150" height="150"></canvas>
        <div class="main_banner_box" id="m_box">
            <a href="javascript:void(0)" class="banner_btn js_pre">
                <span class="banner_btn_arrow"><i></i></span>
            </a>
            <a href="javascript:void(0)" class="banner_btn btn_next js_next">
                <span class="banner_btn_arrow"><i></i></span>
            </a>
            <ul>
                <c:if test="${previewVideos.size() >= 5}">
                    <li id="imgCard0">
                        <a href="javascript:void(0)"><span style="opacity:0;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/${previewVideos[0].previewImage}" alt="">
                        <p style="bottom:0">${previewVideos[0].previewIntroduce}</p>
                    </li>
                    <li id="imgCard1">
                        <a href="javascript:void(0)"><span style="opacity:0;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/${previewVideos[1].previewImage}" alt="">
                        <p style="bottom:0">${previewVideos[1].previewIntroduce}</p>
                    </li>
                    <li id="imgCard2">
                        <a href="javascript:void(0)"><span style="opacity:0;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/${previewVideos[2].previewImage}" alt="">
                        <p style="bottom:0">${previewVideos[2].previewIntroduce}</p>
                    </li>
                    <li id="imgCard3">
                        <a href="javascript:void(0)"><span style="opacity:0;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/${previewVideos[3].previewImage}" alt="">
                        <p style="bottom:0">${previewVideos[3].previewIntroduce}</p>
                    </li>
                    <li id="imgCard4">
                        <a href="javascript:void(0)"><span style="opacity:0;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/${previewVideos[4].previewImage}" alt="">
                        <p style="bottom:0">${previewVideos[4].previewIntroduce}</p>
                    </li>
                </c:if>
                <c:if test="${previewVideos.size() <5}">
                    <li id="imgCard0">
                        <a href=""><span style="opacity:0;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/big0020150102211033.jpg" alt="">
                        <p style="bottom:0">周杰伦粉丝版MV</p>
                    </li>
                    <li id="imgCard1">
                        <a href=""><span style="opacity:0.4;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/big0120150101183428.jpg" alt="">
                        <p>乐侃有声节目第二期</p>
                    </li>
                    <li id="imgCard2">
                        <a href=""><span style="opacity:0.4;" ></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/big0320150101183351.jpg" alt="">
                        <p>乐见大牌：”荣“耀之声，”维“我独尊</p>
                    </li>
                    <li id="imgCard3">
                        <a href=""><span style="opacity:0.4;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/big0420150101224343.jpg" alt="">
                        <p>王力宏四年心血结晶</p>
                    </li>
                    <li id="imgCard4">
                        <a href=""><span style="opacity:0.4;"></span></a>
                        <img src="${pageContext.request.contextPath}/resource/main_banner/big0720150102210934.jpg" alt="">
                        <p>MV精选：《武媚》女神团美艳大比拼</p>
                    </li>
                </c:if>
            </ul>
            <!--火狐倒影图层-->
            <p id="rflt"></p>
            <!--火狐倒影图层-->
        </div>
        <!--序列号按钮-->
        <div class="btn_list">
            <span class="curr"></span><span></span><span></span><span></span><span></span>
        </div>
    </div>

</div>


</body>
</html>
